/* /magic/The Twenty Card Mystery.css */

*:focus {outline: none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}

body {
	background-color:ivory;
	font-family:sans-serif;
}
#main {
	background-color:ivory;
	width:100vw;
	margin: 1vw auto 0 auto;
	padding-bottom: 1vw;
}
#head {
	padding-top: .5vw;
	display:flex;
	align-items: center;
	justify-content: space-around;
}
#head div img {
	width:80%;
	display:block;
	margin:0 auto;
}
#title {
	font-style: italic;
	color:#00f;
	font-size:16px;
}
#msg {
	text-align:center;
	color:black;
	font-size:14px;
}
#go {
	display:none;
}
.button {
	background: peru;
	margin:10px auto;
	color:ivory;
	width:70px;
	text-align:center;
	padding:4px 0;
	font-size: 16px;
	border-radius: 15%;
	cursor:pointer;
}
#grid1 {
	margin:1vw auto;
	padding-left:20px;
	width:98vw;
	display:flex;
	flex-wrap: wrap;
	max-width:1080px;
	justify-content:center;
}
#grid1 img {
	display:inline;
	height:80px;
}
#box {
	margin:10px auto;
	display:none;
	max-width:666px;
	justify-content:center;
}
#buttons {
	display:flex;
	width:14vw;
	flex-wrap: wrap;
	align-items:center;
}
.check {
	width:10vw;
	height:10vw;
	border: .5vw solid peru;
	border-radius:50%;
	background:burlywood;
	margin: auto auto;
}
#grid2 {
	display:flex;
	width:84vw;
	flex-wrap: wrap;
}
.card2 {
	width:19.5%;
	align-self: center;
	flex: 0 0 auto;
}
#answer {
	display:none;
	align-items: flex-end;
	justify-content:space-around;
}
.wizard {
	width:50%;
}
#ans1, #ans2 {
	width: 20%;
}

@media screen and (orientation:landscape) {
	#grid1 img {
		height:95px;
	}
	#grid2 {
		width:534px;
	}
	.card2 {
		height:153px;
	}
	#title, #msg {
		font-size: 20px;
	}
	#buttons {
		width:55px;
	}
	.button {
		font-size: 20px;
	}
	.check {
		width:55px;
		height:55px;
	}
}